iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

網頁前端基礎&Vue.js系列 第 18

javascript(event&DOM)(DAY18)

  • 分享至 

  • xImage
  •  

這篇文章會介紹event和DOM,event事件的意思是說我們設計網頁可以使用事件處理器(event handlers)監聽網頁使用者的行為,像是上一篇介紹的onclick,當發生使用者用滑鼠左鍵點選html元素的行為時;還有像是當使用者將網頁載入時等事件。而DOM(Document Object Model)文件物件模型的意思則是以物件的方式來存取文件(html)的內容,也就是使用一組API(程式介面)達成html和javascript之間的溝通橋樑,使javascript能夠對html存取等各種操作。

  • DOM將html文件定義成樹狀結構

<html>
<head>
<meta charset="utf-8" />
    <style>
    </style>
</head>
<body>
        <h1>樂氣球嘉年華</h1>
        <video src="IMG_4736.MOV"></video>
</body>
</html>

https://ithelp.ithome.com.tw/upload/images/20210930/201402250IOgi7qAPX.png

  1. Html是document的子節點
  2. document是Html的父節點
  3. head和 body是兄弟節點
  • 節點v.s元素節點

節點包含文字節點和文件宣告型別等(文字節點:像是空白換行字元文件宣告型別:<!DOCTYPE html>等),而元素節點則不包含文字節點和文件宣告型別,在javascript較常使用到元素節點。

  • 存取子節點

head:存取head元素的子節點
body: 存取body元素的子節點
firstChild:存取第一個子節點
lastChild: 存取最後一個子節點
ChildNodes:傳回所有子節點(可以使用childNodes[]來指定要取第幾個子節點,ex:childNodes[3],代表存取第三個子節點,0為開始子節點)

<script>
            document.head.firstChild;
            //存取head下的第一個子節點
            document.body.childNodes[3];
            //存取body下的第三個子節點
            document.firstChild;
            //存取第一個子節點
            document.lastChild;
            //存取最後一個子節點
            document.childNodes;
            //存取document下的所有子節點
 </script>
  • 存取元素節點

<script>
            document.firstElementChild;
            //存取第一個子元素
            document.lastElementChild;
            //存取最後一個子元素
            document.children;
            //存取document下的所有子元素
            document.children[3];
            //存取document下的第三個子元素
            document.getElementsByTagName("input");
            //存取後代元素中所有input元素集合
            document.getElementsByName("byname");
            //存取html元素中name屬性為byname的元素集合
            document.getElementById("byname");
            //存取html元素中id屬性為byname的元素
</script>
  • 建立文字節點&元素節點

document.createTextNode(""):建立文字節點
ex: document.createTextNode("hello");//建立一個文字內容為hello的文字節點
document.createElement(""):建立元素節點
ex: document.createElement("li");//建立一個html的li元素節點

  • 加入某元素的子節點&某元素子節點長度

appendChild:加入某元素的子節點
children.length: 某元素的子節點長度

結語

這篇文章介紹了什麼是event事件和DOM文件物件模型,但在event的部分還沒帶大家認識到各種常用的事件屬性,而DOM則介紹了許多,像是DOM樹狀結構、存取節點和元素節點的屬性、建立文字節點和元素節點的屬性以及如何在html元素中加入子節點等,下篇將會介紹如何用今天所認識的DOM屬性來完成一個簡單的例子!


上一篇
javascript函式與動態變更網頁內容(DAY17)
下一篇
javascript(DOM)(DAY19)
系列文
網頁前端基礎&Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言